let rewardList = ["谢谢参与", "公仔", "保温杯", "鼠标垫", "口罩", "200积分"];
 
//奖励个数（包括谢谢参与）
// const num = random(2, 5) + 1;
const num = 6;
//每一份角度
const angle = (Math.PI * 2) / num;
 
//初始化转盘
function initTurntable() {
  let textEl = document.querySelector(".reward-num");
  textEl.innerHTML = `奖励个数：${num}`;
  drawGird(num);
  initReward();
  initDraw();
}
 
// 生产一圈的点坐标
function initPolygon(num = 3, r = 250, center = { x: 250, y: 250 }) {
  // 生成多边形的点
  let points = [];
  //偏移量
  let baseAngle = angle - Math.PI / 2;
  for (let i = 0; i < num; i++) {
    // 当前点对应的角度
    let currenAngle = i * angle + baseAngle;
    let point = {
      x: r * Math.cos(currenAngle) + center.x,
      y: r * Math.sin(currenAngle) + center.y,
    };
    points.push(point);
  }
  return points;
}
 
//绘制转盘内容
function drawGird(num) {
  let canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, 500, 500);
  ctx.beginPath();
  ctx.arc(250, 250, 249, 0, 4 * Math.PI);
  ctx.stroke();
  ctx.closePath();
 
  initPolygon(num).map((item, index) => {
    ctx.beginPath();
    ctx.moveTo(250, 250);
    ctx.lineTo(item.x, item.y);
    ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
      Math.random() * 255
    )},${Math.floor(Math.random() * 255)})`;
    ctx.stroke();
    ctx.closePath();
  });
}
 
//高亮中奖区域
function highlight(num) {
  let canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");
  let fix = -Math.PI / 2;
  let sub = Math.PI / 720;
  //计算高亮位置
  let start = angle * num + fix + sub;
  let end = angle * (num + 1) + fix - sub;
  /**绘制扇形 */
  ctx.beginPath();
  ctx.moveTo(250, 250);
  ctx.arc(250, 250, 248, start, end);
  ctx.fillStyle = "#dd2f26";
  ctx.fill();
  ctx.closePath();
}
 
//初始化奖励位置
function initReward() {
  let rewardBox = document.querySelector(".reward-list");
  rewardList.slice(0, num).map((reward, index) => {
    let el = document.createElement("li");
    el.classList.add("reward-item");
    el.innerHTML = reward;
    el.style["transform-origin"] = `100px 250px`;
    el.style["transform"] = `rotate(${(360 / num) * index + 180 / num}deg)`;
    rewardBox.appendChild(el);
  });
}
 
//初始化抽奖功能
function initDraw() {
  let el = document.querySelector(".point");
  el.addEventListener("click", () => {
    console.log("抽奖");
    luckDraw();
  });
}
/**抽奖 */
function luckDraw(which = -1) {
  // 随机中奖
  which = which == -1 ? random(num - 1) : which;
  console.log(which);
  let msgEl = document.querySelector(".reward-type");
  msgEl.innerHTML = `中奖内容：${rewardList[which]}`;
  let el = document.querySelector(".route");
  //旋转角度 = 固定圈数 + index * (每一份角度) + 中心偏移
  el.style["transform"] = `rotate(-${36000 + (360 / num) * which + 180 / num
    }deg)`;
  el.style["transition"] = "transform 5s cubic-bezier(0, 1, 0.2, 1)";
  setTimeout(() => {
    highlight(which);
    setTimeout(() => {
      el.style["transition"] = "none";
      el.style["transform"] = "none";
      drawGird(num);
    }, 2000);
  }, 4000);
}
 
// 初始化点击事件
function initSelect() {
  let selectList = document.querySelectorAll(".select-type");
  for (let i = 0; i < selectList.length; i++) {
    selectList[i].addEventListener("click", () => {
      luckDraw(i);
    });
  }
}
function random(num) {
  return Math.floor(Math.random() * 10) % num + 1
}
 
initTurntable();
initSelect();